<template>
  <div class="ma">
    <div class="piclist" :style="blockStyle">
      <div class="sinImg" :Style="imageStyle" :class="{'nomt':i == 0}" v-for="(item,i) in data.imglist" :key="i">
        <vimage :src="item.url" v-if="item.url"></vimage>
        <img src="@/assets/images/banner.png" v-else/>
      </div>
      <div class="noImg" v-if="data.imglist == 0">EMPTY</div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        
      }
    },
    props: {
      data: {
        type: Object,
        default: {}
      }
    },
    created(){
      
    },
    watch:{
      
    },
    computed: {
      blockStyle() {
        return 'margin:' + this.data.margin.top / 2 + 'px ' + this.data.margin.lr / 2 + 'px ' + this.data.margin.bottom + 'px;';
      },
      imageStyle(){
        return 'border-radius:' + this.data.radius / 2 + 'px;margin-top:' + this.data.margin.pic / 2 + 'px;'
      }
    },
    methods:{
      
    }

  }
</script>

<style lang="scss" scoped>
.ma{
  width: 100%;
  overflow: hidden;
}

.piclist{
  display: flex;
  flex-flow: column;
  //margin: 20px 30px;

  .noImg{
    margin: 10px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    box-sizing: border-box;
    border: 2px dashed #E4E7ED;
    color: #C0C4CC;
  }

  .sinImg{
    overflow: hidden;
    margin-top: 20px;
    //border-radius: 20px;
    // background: #fff;
    
    &.nomt{
      margin-top: 0 !important;
    }

    // &:first-child{
    //   margin-top: 0;
    // }

    img{
      width: 100%;
      display: block;
    }
  }
}
</style>
